<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }

        .grid table {
            width: 100%;
            border-collapse: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: orange;
        }

        .titleBox {
            text-align: center;
            margin: 20px auto;
        }

        button {
            background-color: lightgreen;
        }
    </style>


</head>

<body>
    <div id="app">

        <div class="titleBox">
            <input type="text" placeholder="书名" v-model.trim='name'>
            <button @click="addBook">点击添加</button>
            <button @click="changeBook">点击修改</button>
        </div>

        <div class="grid">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for='item in books' :key='item.id'>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <!-- <td>{{item.date|getDate('yyyy-mm-dd')}}</td> -->
                        <!-- <td>{{item.date|getDate('hh:mm:ss')}}</td> -->
                        <td>{{item.date|getDate()}}</td>

                        <td>
                            <a href="#" @click.prevent='editBook(item.id)'>修改</a>
                            <span>|</span>
                            <a href="#" @click.prevent='delBook(item.id)'>删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        /*
          图书管理-图书列表展示功能
          注意事项：<a href="" @click.prevent>修改</a>
          事件绑定时，可以只添加修饰符，而不绑定事件函数
        */
        Vue.filter('getDate', function (val,data) {
            let y = val.getFullYear();
            let m = val.getMonth()+1;
            let d = val.getDate();
            let h = val.getHours();
            let mm = val.getMinutes();
            let s = val.getSeconds();
            m = m>10 ?m:'0'+m
            d = d>10 ?d:'0'+d
            h = h>10 ?h:'0'+h
            mm = mm>10 ?mm:'0'+mm
            s = s>10 ?s:'0'+s
            if(data&&data == 'yyyy-mm-dd'){
                return `${y}-${m}-${d}`
            }else if(data&&data == 'hh:mm:ss'){
                return `${h}:${mm}:${s}`
            }else{
                return `${y}-${m}-${d} ${h}:${mm}:${s}`
            }



            
        })
        let vm = new Vue({
            el: '#app',
            data: {
                name: '',
                books: [{
                    id: 1,
                    editId: 0,
                    name: '三国演义',
                    date: new Date()
                }, {
                    id: 2,
                    name: '水浒传',
                    date: new Date()
                }, {
                    id: 3,
                    name: '红楼梦',
                    date: new Date()
                }, {
                    id: 4,
                    name: '西游记',
                    date: new Date()
                }]
            },
            methods: {
                // 添加功能
                addBook() {
                    let bookId = this.books[this.books.length - 1].id;
                    bookId++;
                    let bookObj = {
                        id: bookId,
                        name: this.name,
                        date: new Date()
                    }
                    this.books.push(bookObj)
                    this.name = ''
                },
                // 删除功能
                delBook(id) {
                    this.books = this.books.filter(item => item.id != id)
                },
                // 修改功能
                editBook(id) {
                    let currentIndex = this.books.findIndex(item => item.id == id)
                    this.name = this.books[currentIndex].name;
                    this.editId = this.books[currentIndex].id
                },
                changeBook(id) {
                    this.books.forEach(item => {
                        if (item.id == this.editId) {
                            item.name = this.name
                        }
                    });
                    this.name = ''
                }
            }
        })


    </script>
</body>

</html>